<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小黑记事本</title>
</head>
<style>
    @font-face {
        font-family: 'iconfont';
        src: url('font1/iconfont.eot');
        src: url('font1/iconfont.eot?#iefix') format('embedded-opentype'),
            url('font1/iconfont.woff2') format('woff2'),
            url('font1/iconfont.woff') format('woff'),
            url('font1/iconfont.ttf') format('truetype'),
            url('font1/iconfont.svg#iconfont') format('svg');
    }
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #000;
        position: absolute;
        right: 20px;
    }
    .iconfont:hover,
    .clear:hover{
        color: #00a4ff;
    }
    *{
        margin:0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    #record{
        width: 1000px;
        height: 700px;
        background-color: rgb(250, 250, 250)!important;
        margin: 100px auto;
        box-shadow: 10px 10px 10px rgba(0, 0, 0,0.1),-10px -10px 10px rgba(0, 0, 0, 0.1);
    }
    h1{
        font-weight: 100;
        text-align: center;
        padding: 20px 0;
        color:#00a4ff;
    }
    body{
        background-color:#ccc;
    }
    .text{
        width: 800px;
        height: 50px;
        border: 1px solid #fff;
        margin: 0 100px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),-1px -1px 5px rgba(0, 0, 0, 0.1);
        position: relative;
    }
    .inou{
        margin: 0 20px;
        height: 48px;
        width: 750px;
        font-size: 20px;
        font-weight: 100;
        border: none;
        outline:0;
    }
    ul{
        position: absolute;
        top: 53px;
        width: 800px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1),-1px -1px 5px rgba(0, 0, 0, 0.1);
    }
    ul li{
        text-decoration: none;
        width: 800px;
        border-top: 1px solid rgb(226, 226, 226);
        list-style: none;
        box-sizing: border-box;
        background-color: #fff;
        border-collapse: collapse;
        padding: 0 20px;
        line-height: 60px;
        font-weight: 100;
        color: #333;
        font-size: 20px;
        position: relative;
    }
    .special{
        background: url(images/J1.png) -4px -120px;
        width: 800px;
        height: 60px;
        background-size: 806px;
        position: relative;
    }
    li .count{
        font-size: 14px;
        position: absolute;
        top: -5px;
        color: rgb(131, 131, 131);
    }
    li .clear{
        font-size: 14px;
        position: absolute;
        top: -5px;
        right: 35px;
        color: rgb(131, 131, 131);
        text-decoration: none;
    }
</style>
<body>
    <div id="record">
        <h1>小黑记事本</h1>
        <div class="text">
            <input type="text" class="inou" placeholder="请输入任务" v-model="req" @keyup.enter="sure">
            <ul>
                <li v-for="(item,index) in arr" @mouseover="over">
                    {{index+1}}. {{item}}
                    <a href="#" class="iconfont" @click="remove(index)" v-show="showing">&#xe607;</a>
                </li>
                <li class="special" v-if="arr!=0">
                    <span class="count">{{count}} items left</span>
                    <a href="javascript:void(0);" class="clear" @click="clear">Clear</a>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var record=new Vue({
            el:"#record",
            data:{
                req:"",
                arr:[],
                index:0,
                count:0,
                showing:true
            },
            methods:{
                sure:function(){
                    // this.arr[this.index]=this.req;
                    // this.index++;
                    this.arr.push(this.req);
                    this.count=this.arr.length;
                    this.req="";
                },
                clear:function(){
                    this.arr=[];
                    this.count=0;
                    this.index=0;
                },
                remove:function(index){
                    this.arr.splice(index,1);
                    this.count=this.arr.length;
                },
                over:function(){
                    // this.showing=!this.showing;
                }
            }
        })
    </script>
</body>
</html>